direction

Internet Explorer

Chrome

Opera

Safari

Firefox

7.0

8.0

9.0

7.0

8.0

9.6

10.0

10.0

3.1

4.0

5.0

3.0

3.6

4.0

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

 

Коротка інформація

CSS

CSS2

Значення за умовчанням

ltr

Наслідує

Так

Застосовується

До усіх елементів

Аналог HTML

<тег direction="ltr | rtl"">

Посилання на специфікацію

http://www.w 3.org/TR/CSS21/visuren.html#propdef - direction

Опис

direction призначений для сайтів, в яких має значення напрям тексту. Наприклад, при використанні арабського алфавіту читання відбувається справа наліво.

Властивість direction досить універсально і управляє наступними можливостями:

Для використання зі вбудованими елементами, значення властивості unicode - bidi має бути задане як embed або override.

Синтаксис

direction: ltr | rtl | inherit

Значення

ltr Встановлює напрям зліва направо.

rtl Задає напрям справа наліво.

inherit Наслідує значення батька.

Приклад 1

HTML 4.0  CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

    <title>direction</title>

    <style type="text/css">

      DIV.rtl {

        direction: rtl; /* Напрям */

        width: 200px; /* Ширина блоку */

        height: 150px; /* Висота блоку */

        overflow: scroll; /* Смуга прокрутки */

        text - align: left; /* Вирівнювання по лівому краю */

        padding: 5px; /* Полів навколо тексту */

        border: 1px solid #000; /* Параметрів рамки */

      }

    </style>

  </head>

  <body>

    <div class="rtl">Велосипед вже винайшли, різні прийоми верстання теж.

    Отже більше знайомся зі світовим досвідом по частині верстання і тобі не доведеться витрачати

    час на розробку того, що усім давно відомо.</div>

  </body>

</html>

Результат цього прикладу показаний на мал. 1. Зверніть увагу на положення точки в пропозиції, а також на те, що смуга прокрутки у браузері Internet Explorer відображається ліворуч.

 

Мал. 1. Результат використання direction у браузері Internet Explorer

Приклад 2

HTML 4.0  CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

    <title>direction</title>

    <style type="text/css">

        TABLE {

          direction: rtl; /* Колонок йдуть справа наліво */

          width: 100%; /* Ширина таблиці */

        }

    </style>

  </head>

  <body>

    <table cellspacing="0" border="1">

      <tr>

          <td>&nbsp;</td><td>1999</td><td>2000</td>

          <td>2001</td><td>2002</td><td>2003</td>

      </tr>

      <tr>

          <td>Нафта</td><td>16</td><td>34</td>

          <td>62</td><td>74</td><td>57</td>

      </tr>

      <tr>

          <td>Золото</td><td>4</td><td>69</td>

          <td>72</td><td>56</td><td>47</td>

      </tr>

      <tr>

          <td>Дерево</td><td>7</td><td>73</td>

          <td>79</td><td>34</td><td>86</td>

      </tr>

    </table>

  </body>

</html>

Результат цього прикладу показаний на мал. 2. Колонки таблиці відображається справа наліво.

 

Мал. 2. Застосування direction до таблиці

Браузери

При додаванні властивості direction зі значенням rtl до блоку із смугою прокрутки (наприклад, <TEXTAREA>), браузер Internet Explorer, Firefox і Netscape відображають скролінг ліворуч, а Opera і Safari - справа.